<template>
    <div>
        <div class="square">
            <div class="title">排列方式</div>
            <div class="content">
                <el-radio-group v-model="form.data.tabs">
                    <el-radio-button label="1">一行一个</el-radio-button>
                    <el-radio-button label="2">一行两个</el-radio-button>
                    <el-radio-button label="3">一行三个</el-radio-button>
                    <el-radio-button label="4">单行滑动</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="square">
            <div class="title">模块间隙</div>
            <div class="content">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider
                ><el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')"></el-input
                ><span style="margin-left: 8px">像素</span>
            </div>
        </div>
        <div class="square">
            <div class="title">选择优惠券</div>
            <div class="tips">最多添加10张优惠券，支持调整图片顺序</div>
            <div class="content block">
                <draggable :list="form.data.imgList" draggable=".item">
                    <template #item="{ index }">
                        <div class="item">
                            <div class="coupon-left">
                                <img class="shape" src="@/assets/imgs/mall/decorate/shape.png" />
                                <span class="coupon-detail">{{ form.data.imgList[index].couponTitle }} </span>
                                <div
                                    class="coupon-status"
                                    v-if="
                                        [3, 4].includes(form.data.imgList[index].couponStatus) ||
                                        form.data.imgList[index].receiveStatus == 1
                                    ">
                                    {{
                                        form.data.imgList[index].couponStatus == 3
                                            ? '已失效'
                                            : form.data.imgList[index].couponStatus == 4
                                            ? '已过期'
                                            : '已领完'
                                    }}
                                </div>
                            </div>
                            <img class="del" src="@/assets/imgs/mall/decorate/del.png" @click="deleteImg(index)" />
                        </div>
                    </template>
                </draggable>
            </div>
        </div>
        <div class="last square">
            <div class="tips">
                <span>{{ form.data.imgList.length }}</span
                >/10
            </div>
            <ZwChooseCoupon
                :shopId="shopId"
                @handle-confirm="submit"
                :isMulti="true"
                :value="allIds"
                :isLimit="true"
                :limitNum="10">
                <template #btn>
                    <div class="couponBtn" @click="addCoupon">添加优惠券</div>
                </template>
            </ZwChooseCoupon>
            <div class="title">设置</div>
            <div class="content">
                <el-checkbox-group v-model="form.data.contentList">
                    <el-checkbox :label="1">隐藏已领完的优惠券</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
import draggable from 'vuedraggable';
import request from '@/request';
import { floatDivide } from '@/commons/utils';
import storage from '@/commons/storage';

const emit = defineEmits(['changeSetting']);
const props = defineProps(['tabparam', 'comIndex', 'components']);
let form = reactive({ data: { space: 0, imgList: [], tabs: props.tabparam, contentList: [1] } });
let allitem = ref([]);
let allIds = reactive([]);
const deleteImg = index => {
    form.data.imgList.splice(index, 1);
};
let shopId = ref(storage.get('ZW-SHOPID'));

const changeSpace = () => {
    form.data.space = Number(form.data.space);
};
// 转换优惠券内容
const couponContent = obj => {
    const { couponPrerequisites, couponMatch, couponPrerequisitesAdditional, couponDiscountContent } = obj;
    const pre = [
        '无门槛，',
        `满${floatDivide(couponPrerequisitesAdditional, 100)}元，`,
        `满${couponPrerequisitesAdditional}件，`
    ];
    const num = [`全部商品`, `部分商品`, '部分商品'];
    return (pre[couponPrerequisites - 1] || '') + (num[couponMatch - 1] || '');
};

/**添加商品 */
const submit = row => {
    //原数据
    let originIds = allIds;
    // 过滤取消得数据
    let data = originIds.filter(item => row.includes(item));
    row.forEach(item => {
        if (!data.includes(item)) {
            data.push(item);
        }
    });
    request('couponList', { couponIds: data }).then(res => {
        form.data.imgList.length = 0;
        Object.assign(
            form.data.imgList,
            (res?.data || []).map(({ couponAcquiredNumber, id, couponInfo, couponId }) => {
                const item = {
                    ...couponInfo
                };
                // receiveStatus:1表示已领完 2表示领取已达上限
                item.receiveStatus = item.couponTotal - couponAcquiredNumber == 0 ? 1 : item?.acquireLimit ? 2 : '';
                item.content = couponContent(item);
                item.couponId = couponId;
                item.id = id;
                return item;
            })
        );
    });
};
const addCoupon = () => {
    allIds = form.data.imgList.map(item => item.id);
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'coupon',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.tabparam,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'coupon',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true,
        immediate: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = JSON.parse(JSON.stringify(props.components));
        if (allitem.value.length) {
            form.data = Object.keys(allitem.value[val].options).length
                ? allitem.value[val].options
                : { space: 0, imgList: [], tabs: props.tabparam, contentList: [1] };
        } else {
            form.data = { space: 0, imgList: [], tabs: props.tabparam, contentList: [1] };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
            allIds = form.data.imgList.map(item => item.id);
        } else {
            form.data = { space: 0, imgList: [], tabs: props.tabparam, contentList: [1] };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 200px;
}
.square {
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    .couponBtn {
        height: 36px;
        line-height: 34px;
        text-align: center;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #ff6b00;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        cursor: pointer;
    }
    .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 8px;
        margin-top: 24px;
    }
    .title::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
    .tips {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 14px;
        margin-bottom: 16px;

        span {
            color: #33302d;
        }
    }
}
.last {
    padding-top: 16px;
    border-bottom: none !important;
}
.block {
    display: block !important;
    margin-bottom: 0 !important;
}
.content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;

    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        padding: 0 16px;
        margin-bottom: 16px;
        cursor: move;
    }
    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eaeaea;
    }
    .addimg {
        width: 18px;
    }
    .del {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    .coupon-left {
        display: flex;
        align-items: center;
        .coupon-detail {
            margin-left: 16px;
            margin-right: 10px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        .coupon-status {
            height: 22px;
            background: #f4f4f4;
            border-radius: 2px;
            line-height: 24px;
            padding: 0 10px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
    .shape {
        width: 13px;
        height: 12px;
    }
}
</style>
